<template>
    <transition name="container">
        <div v-if="visible" class="calendar-box" @click.stop="" @contextmenu.stop="">
        <el-calendar v-model="value" />
        </div>
    </transition>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'CalendarMenu',
  components: {},
  props: {
    visible:{
        type:Boolean,
        default:false
    },
  },
  emits: [],
  setup() {
    const value = ref(new Date())
    return {
        value
    }

  }
}

</script>
<style lang='scss' scoped>
@keyframes translateAnimationShow {
    from 
    {
    //   bottom: -100%;
      transform: scaleY(0);
      opacity: 0;
    }
    to 
    {
      transform: scaleY(1);
      bottom: 10px;
      opacity: 1;
    }
}
  
@keyframes translateAnimationHide {
    from 
    {
      opacity: 1;
      transform: scaleY(1);
    }
    to 
    {
      opacity: 0;
      transform: scaleY(0);
    }
}
.calendar-box {
    z-index: 9996;
    position: absolute;
    width: 450px;
    height: 660px;
    bottom: 10px;
    right: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: $white;
    transform-origin: bottom;
    box-shadow: 0px 0px 2px 1px #efefef;

    &:deep(.el-calendar__body) {
        padding: 12px 20px;
    }
}

.container-enter-active {
  animation-name: translateAnimationShow;
  animation-duration: .2s;
  animation-fill-mode: forwards;
}

.container-leave-active {
  animation-name: translateAnimationHide;
  animation-duration: .2s;
  animation-fill-mode: forwards;
}
</style>